

Ext.onReady(function() {


    // create the Data Store
    
    var ownerStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.findOwners),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','displayableName','address','city']}) 
	});     
	
    var vetStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.getVets),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','displayableName','address','city']}) 
	});     
	
    var specialtyStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.getSpecialties),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','name']}) 
	});     
	
    var petTypeStore = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.getPetTypes),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	fields: ['id','name']}) 
	});     
    var visitStore = new Ext.data.GroupingStore({
    	proxy : new Ext.data.DWRProxy(DwrClinic.findVisits, ['startDate','endDate']),
    	reader : new Ext.data.DwrDataReader({
    	id:'id',
    	totalProperty:'totalRecords',
    	fields: ['id','pet.name','pet.owner.displayableName','vet.displayableName',
    			{name:'date',type:'date'},'description']}) 
	});     
	
    var visitGrid = new Ext.grid.GridPanel({
        id:'visitGrid',
              columns: [
            {id:'id',header: "Id", width:10, sortable: false, dataIndex: 'id',hidden:true},
            {header: "Date", width: 60, sortable: true, renderer:Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'date'},
            {header: "Pet Name", width: 290, sortable: true, dataIndex: 'pet.name'},
            {header: "Owner Name", width: 290, sortable: true, dataIndex: 'pet.owner.displayableName'},
            {header: "Vet Name", width: 290, sortable: true, dataIndex: 'vet.displayableName'},
            {header: "Description", width: 290, sortable: true, dataIndex: 'description'}
        ],
    view: new Ext.grid.GroupingView({
        forceFit:true,
        // custom grouping text template to display the number of items per group
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),
                tbar: ["From",
				 new Ext.form.DateField({
                                    fieldLabel: 'Start Date',
                                    id:'sd',
                                    name: 'sd',
                                    value:'01/01/70',
                                    allowBlank:false
                                }),
                                "-","To",
                                 new Ext.form.DateField({
                                    fieldLabel: 'End Date',
                                    id:'ed',
                                    name: 'ed',
                                    value:'03/03/08',
                                    allowBlank:false
                                }),                
                "-",
            { text: "Load", handler: function() {  
                
                 var startdate = Ext.getCmp('sd').getValue();
                 var enddate = Ext.getCmp('ed').getValue();
           
               visitGrid.getStore().load({params:{start:0,startDate:startdate,endDate:enddate}});
 }},
            { text: "Remove", handler: function() { visitGrid.getStore().removeAll(); }},
            "-"
            /*
            { text: "Add User", handler: addRecord},
            { text: "Insert User", handler: insertRecord},
            { text: "Remove User", handler: removeRecord},
            "->",
            { text: "Example", disabled: true, id: "example" }
            */
		],    
        loadMask: true,
        stripeRows: true,
        title:'Visits',
        store: visitStore,
        bbar : new Ext.PagingToolbar({store:visitStore,
	        pageSize:100, displayInfo:true
        
        })
        
        
    });
    


	new Ext.Viewport({
	    layout: 'border',
	    defaults: {
	        activeItem: 0
	    },
	    items: [{
	    	        region: 'center',
	        xtype: 'tabpanel',
	        items: [visitGrid]
	    }]
	});

	Ext.get('loading').hide(true);

});